<template>
  <!-- 某个活动持有的票券 -->
  <div class="c-bg-sgray c-pt40 c-ph24 c-pb40" :class="from == 'reservation' ? 'bg-orange' : ''">
    <!-- 特定公司、特定活动才有的实名认证入口（创客匠人5000人峰会） -->
    <div v-if="isSummitActivity" class="">
      <div class="c-fs30 c-fc-xblack c-fw600 c-textAlign-c">实名认证须知</div>
      <div class="c-mt20 c-bg-white c-br12 c-ph24 c-pv30 c-mb40">
        <div class="c-fs24 c-fc-sblack c-lh40">为确保各位创始人IP能够高效、顺利地进入会场，请点击下方按钮，提前进行实名认证，感谢您的配合，祝愿您在本次峰会中收获满满！</div>
        <div class="c-mt20 c-flex-row c-flex-center c-hh64 c-br40 c-fs26 c-fc-white" :class="isActivityEnd ? 'c-bg-ccc' : 'theme-bg'" @click="goToAuthentication">{{isActivityEnd ? '活动已结束' : verifyStatus ? '已认证，点击按钮可修改认证信息' : '点我进行实名认证'}}</div>
      </div>
    </div>
    <div class="c-p">
      <div class="ticket-top-box">
        <div class="ticket-top-box-child"></div>
      </div>
      <!-- 约课 -->
      <div v-if="from=='reservation'">
        <!-- 活动名称 -->
        <div class="c-bg-white c-p c-pb48 c-bd-dd1 c-flex-column c-text-hidden">
          <p class="c-ph24 c-pt40 c-textAlign-c c-fs28 c-fw-b c-ww-bw c-ww-ba theme-fc c-w100">{{ticketNumData.name}}</p>
        </div>
        <!-- 报名信息 -->
        <div class="c-bg-white c-p c-ph30 c-pt40 c-pb48 c-flex-column c-fs22">
          <div class="c-flex-row c-aligni-center c-pb30" v-if="ticketNumData.cancelable == 1 || ticketNumData.alteration == 1">
            <template v-if="companyAuth.enableDeclareModule == 0">
              <!-- 聚尚美没有的 取消预约 和退改说明 -->
              <span @click="showInstructionsDialog = true" class="c-fs20 c-fc-xblack c-text-decoration-underline c-flex-grow1 c-w0">退改说明</span>
              <span v-if="ticketNumData.cancelable == 1" @click="showCancelReservation = true" class="btn-cancle c-flex-row c-flex-center c-ww120 c-hh40 c-br20 c-fs22 c-mr20">取消预约</span>
            </template>
            <span v-if="ticketNumData.alteration == 1" @click="toAlterTicket" class="btn-change c-flex-row c-flex-center c-ww120 c-hh40 c-br20 c-fs22">我要改签</span>
          </div>
          <div class="c-pb24 c-flex-row">
            <span class="c-ww120 c-fc-gray">专场名称</span>
            <div class="c-w0 c-flex-grow1 c-fc-xblack c-text-ellipsis1">{{ticketNumData.sessionName}}</div>
          </div>
          <div class="c-pb24 c-flex-row c-aligni-center">
            <span class="c-ww120 c-fc-gray">{{ticketNumData.reservationMode == 2 ?'时间':'预约时间'}}</span>
            <div class="c-w0 c-flex-grow1 c-fc-xblack" v-if="ticketNumData.reservationMode == 2">{{ticketNumData.enrollStartAt?ticketNumData.enrollStartAt.substr(0,16) : ''}} 至 {{ticketNumData.enrollEndAt ? ticketNumData.enrollEndAt.substr(0,16) : ''}}</div>
            <div class="c-w0 c-flex-grow1 c-fc-xblack" v-if="ticketNumData.reservationMode == 1">{{ticketNumData.enrollTime}}</div>
          </div>
          <div class="c-pb24 c-flex-row" v-if="ticketNumData.place">
            <span class="c-ww120 c-fc-gray">地点</span>
            <div class="c-w0 c-flex-grow1 c-fc-xblack">{{ticketNumData.place}}</div>
          </div>
          <div class="c-pb24 c-flex-row" v-if="ticketNumData.coachName">
            <span class="c-ww120 c-fc-gray">预约教练</span>
            <div class="c-w0 c-flex-grow1 c-fc-xblack">{{ticketNumData.coachName}}</div>
          </div>
          <div class="c-pb24 c-flex-row c-aligni-center">
            <span class="c-ww120 c-fc-gray">预约人</span>
            <div class="c-w0 c-flex-grow1 c-fc-xblack">{{ticketNumData.userName}}</div>
          </div>
          <div class="c-flex-row c-aligni-center">
            <span class="c-ww120 c-fc-gray">联系电话</span>
            <div class="c-w0 c-flex-grow1 c-fc-xblack">{{ticketNumData.mobile}}</div>
          </div>
          <em class="c-pa bg-orange c-pa-em c-pa-rt0"></em>
          <em class="c-pa bg-orange c-pa-em c-pa-lt0"></em>
          <!-- 约课已取消状态 -->
          <div class="c-pa cancel-icon" v-if="ticketNumData.status == -3">
            <span><i class="iconfont c-fc-gray c-fs64">&#xe8e0;</i></span>
          </div>
        </div>
        <!-- 票劵信息 -->
        <div class=" c-pt50 c-pb72 c-p c-bg-fa c-flex-column c-flex-center c-br-br10 c-br-bl10 box-bottom-border">
          <p class="c-fs36 c-fw-b theme-fc c-fstyle-i">预约码：{{ticketNumData.ticketNo | formatTicketNum}}</p>
          <p v-if="ticketNumData.groupName" class="c-fs22 c-pt10 c-fc-gray">所属分组：{{ticketNumData.groupName}}</p>
        </div>
        <!-- 退款中 -->
        <p class="c-pa c-pz100 c-ww200 c-hh150 c-p-tp50 c-p-tl50 refund-pa" v-if="(ticketNumData.refundStatus==2 || ticketNumData.refundStatus==-1) && ticketNumData.permission=='收费票'"><img class="c-w100 c-h100" src="../../assets/i/wap/activity/refunding.png" alt=""></p>
        <!-- 已退款 -->
        <p class="c-pa c-pz100 c-ww200 c-hh150 c-p-tp50 c-p-tl50 refund-pa" v-else-if="ticketNumData.refundStatus==1 && ticketNumData.permission=='收费票'"><img class="c-w100 c-h100" src="../../assets/i/wap/activity/refunded.png" alt=""></p>
        <div class="c-ph30 c-pt40 c-flex-row c-justify-sb">
          <div class="c-ww210 c-hh72 c-flex-row c-flex-center theme-fc c-fs24 c-bg-white c-br36" @click="goToSectionDetail">专场详情</div>
          <div class="c-ww210 c-hh72 c-flex-row c-flex-center theme-fc c-fs24 c-bg-white c-br36" @click="goToMyReservationList">我的约课</div>
        </div>
      </div>
      <!-- 活动 -->
      <div v-if="from=='activity'">
        <swiper :options="swiperOption" ref="swiperMy" v-if="ticketNumData && ticketNumData.length > 1" class="c-maxh1000">
          <swiper-slide v-for="(item, index) in ticketNumData" :key="index">
            <div class="c-p c-pz10 c-bg-white c-br-tl32 c-br-tr32 c-br-bl16 c-br-bl16 c-br-br16 c-text-hidden">
              <div class="c-pa c-pz1 c-p-t0 c-p-l0 gray-mask c-hh54 c-w100 c-br-tl32 c-br-tr32"></div>
              <div class="c-p c-pz10 c-mh24 c-pt42 c-pb40 c-fs24 c-fc-xblack c-bd-bd1-E6">
                <div class="c-fs30 c-fw600 c-lh40 c-textAlign-c c-pb22 c-bd-bd1-E6">{{item.name}}</div>
                <div class="c-flex-row c-mt40 c-lh34">
                  <span class="c-fc-gray">活动时间：</span>
                  <span>{{item.enrollStartAt | formatStringTime}} 至 {{item.enrollEndAt | formatStringTime}}</span>
                </div>
                <div v-if="item.place" class="c-flex-row c-mt20 c-lh34">
                  <span class="c-flex-shrink0 c-fc-gray">活动地点：</span>
                  <span>{{item.place}}</span>
                </div>
                <div class="c-flex-row c-mt20 c-lh34">
                  <span class="c-flex-shrink0 c-fc-gray">参加人员：</span>
                  <span>{{item.enrollName}}</span>
                </div>
                <div class="c-flex-row c-mt20 c-lh34">
                  <span class="c-flex-shrink0 c-fc-gray">联系电话：</span>
                  <span>{{item.enrollMobile}}</span>
                </div>
                <div class="c-pa c-pz10 c-p-lm32 c-p-bm10 c-bg-sgray c-ww20 c-hh20 c-brp50"></div>
                <div class="c-pa c-pz10 c-p-rm32 c-p-bm10 c-bg-sgray c-ww20 c-hh20 c-brp50"></div>
              </div>
              <!-- 票劵信息 -->
              <div class="c-pt30 c-pb40 c-ph24 c-p c-flex-column c-flex-center c-br-br10 c-br-bl10">
                <div class="c-fs36 c-lh48 c-fw600 theme-fc">票号：{{item.ticketNo | formatTicketNum}}</div>
                <div v-if="isSummitActivity && item && item.codeQr" class="c-mt20 c-mb30 c-ww240 c-hh240 c-br c-mt50 c-p c-pz1 c-br8">
                  <div class="iconfont c-fs32 theme-fc c-pa c-p-tm8 c-p-lm8 c-pz10 c-rotate180">&#xe865;</div>
                  <div class="iconfont c-fs32 theme-fc c-pa c-p-tm8 c-p-rm8 c-pz10 c-rotate270">&#xe865;</div>
                  <div class="iconfont c-fs32 theme-fc c-pa c-p-bm8 c-p-lm8 c-pz10 c-rotate90">&#xe865;</div>
                  <div class="iconfont c-fs32 theme-fc c-pa c-p-bm8 c-p-rm8 c-pz10">&#xe865;</div>
                  <img class="c-ww240 c-hh240 c-p c-pz1 c-br8" :src="$addXossFilter(item.codeQr, require('@/assets/activity_defult.png'))" alt="">
                </div>
                <div class="c-fs24 c-fc-gray c-mt10 c-lh36 c-textAlign-c">{{item.ticketName}}</div>
                <div v-if="item.groupName" class="c-fs24 c-fc-gray c-mt16 c-lh24">所属分组：{{item.groupName}}</div>
              </div>
              <!-- 退款中 -->
              <img v-if="(item.refundStatus==2 || item.refundStatus==-1) && item.permission=='收费票'" class="c-pa c-pz11 c-p-r0 c-p-t10 c-ww120 c-h-auto" src="../../assets/i/wap/activity/refunding.png" alt="">
              <!-- 已退款 -->
              <img v-else-if="item.refundStatus==1 && item.permission=='收费票'" class="c-pa c-pz11 c-p-r0 c-p-t10 c-ww120 c-h-auto" src="../../assets/i/wap/activity/refunded.png" alt="">
            </div>
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
        <div v-if="ticketNumData && ticketNumData.length == 1" class="c-p c-pz10 c-bg-white c-br-tl32 c-br-tr32 c-br-bl16 c-br-bl16 c-br-br16 c-text-hidden">
          <div class="c-pa c-pz1 c-p-t0 c-p-l0 gray-mask c-hh54 c-w100 c-br-tl32 c-br-tr32"></div>
          <div class="c-p c-pz10 c-mh24 c-pt42 c-pb40 c-fs24 c-fc-xblack c-bd-bd1-E6">
            <div class="c-fs30 c-fw600 c-lh40 c-textAlign-c c-pb22 c-bd-bd1-E6">{{ticketNumData[0].name}}</div>
            <div class="c-flex-row c-mt40 c-lh34">
              <span class="c-fc-gray">活动时间：</span>
              <span>{{ticketNumData[0].enrollStartAt | formatStringTime}} 至 {{ticketNumData[0].enrollEndAt | formatStringTime}}</span>
            </div>
            <div v-if="ticketNumData[0].place" class="c-flex-row c-mt20 c-lh34">
              <span class="c-flex-shrink0 c-fc-gray">活动地点：</span>
              <span>{{ticketNumData[0].place}}</span>
            </div>
            <div class="c-flex-row c-mt20 c-lh34">
              <span class="c-flex-shrink0 c-fc-gray">参加人员：</span>
              <span>{{ticketNumData[0].enrollName}}</span>
            </div>
            <div class="c-flex-row c-mt20 c-lh34">
              <span class="c-flex-shrink0 c-fc-gray">联系电话：</span>
              <span>{{ticketNumData[0].enrollMobile}}</span>
            </div>
            <div class="c-pa c-pz10 c-p-lm32 c-p-bm10 c-bg-sgray c-ww20 c-hh20 c-brp50"></div>
            <div class="c-pa c-pz10 c-p-rm32 c-p-bm10 c-bg-sgray c-ww20 c-hh20 c-brp50"></div>
          </div>
          <!-- 票劵信息 -->
          <div class="c-pt30 c-pb40 c-ph24 c-p c-flex-column c-flex-center c-br-br10 c-br-bl10">
            <div class="c-fs36 c-lh48 c-fw600 theme-fc">票号：{{ticketNumData[0].ticketNo | formatTicketNum}}</div>
            <div v-if="isSummitActivity && ticketNumData[0] && ticketNumData[0].codeQr" class="c-mt20 c-mb30 c-ww240 c-hh240 c-br c-mt50 c-p c-pz1 c-br8">
              <div class="iconfont c-fs32 theme-fc c-pa c-p-tm8 c-p-lm8 c-pz10 c-rotate180">&#xe865;</div>
              <div class="iconfont c-fs32 theme-fc c-pa c-p-tm8 c-p-rm8 c-pz10 c-rotate270">&#xe865;</div>
              <div class="iconfont c-fs32 theme-fc c-pa c-p-bm8 c-p-lm8 c-pz10 c-rotate90">&#xe865;</div>
              <div class="iconfont c-fs32 theme-fc c-pa c-p-bm8 c-p-rm8 c-pz10">&#xe865;</div>
              <img class="c-ww240 c-hh240 c-p c-pz1 c-br8" :src="$addXossFilter(ticketNumData[0].codeQr, require('@/assets/activity_defult.png'))" alt="">
            </div>
            <div class="c-fs24 c-fc-gray c-mt10 c-lh36 c-textAlign-c">{{ticketNumData[0].ticketName}}</div>
            <div v-if="ticketNumData[0].groupName" class="c-fs24 c-fc-gray c-mt16 c-lh24">所属分组：{{ticketNumData[0].groupName}}</div>
          </div>
          <!-- 退款中 -->
          <img v-if="(ticketNumData[0].refundStatus==2 || ticketNumData[0].refundStatus==-1) && ticketNumData[0].permission=='收费票'" class="c-pa c-pz11 c-p-r0 c-p-t10 c-ww120 c-h-auto" src="../../assets/i/wap/activity/refunding.png" alt="">
          <!-- 已退款 -->
          <img v-else-if="ticketNumData[0].refundStatus==1 && ticketNumData[0].permission=='收费票'" class="c-pa c-pz11 c-p-r0 c-p-t10 c-ww120 c-h-auto" src="../../assets/i/wap/activity/refunded.png" alt="">
        </div>
        <div v-if="ticketNumData.length > 1" class="swiper-button-next c-flex-row c-flex-center">
          <i class="iconfont c-fs26 c-fc-white c-rotate270">&#xe635;</i>
        </div>
      </div>
    </div>

    <cj-popup v-model="showInstructionsDialog" round :closeable="true" title="退改说明">
      <div class=" c-ww500 c-pb60 c-fs24 c-fc-sblack c-textAlign-l c-pl60">
        <p class="c-pv10">
          <template v-if="ticketNumData.alterationDays > 0">
            1、场次开始前{{ticketNumData.alterationDays}}{{ticketNumData.alterationUnit == 1?'分钟':'天'}}支持改签。
          </template>
          <template v-else>
            1、场次开始前均支持改签
          </template>
        </p>
        <p class="c-pv10">
          <template v-if="ticketNumData.cancelDays > 0">
            2、场次开始前{{ticketNumData.cancelDays}}{{ticketNumData.cancelUnit == 1?'分钟':'天'}}支持取消预约。
          </template>
          <template v-else>
            2、场次开始前均支持取消预约
          </template>
        </p>
        <p class="c-pv10">3、预约后逾期未签到，视为已参加。</p>
      </div>
    </cj-popup>
    <!-- 约课的取消预约确认弹框 -->
    <cj-popup v-model="showCancelReservation" round :closeable="true" title="取消预约确认">
      <div class="c-ww500 c-fs24 c-fc-sblack c-textAlign-l">
        <div class="c-ph40 c-mh20">
          <p class="c-pt10 c-pb12 c-lh36">{{refundInfo && refundInfo.isRefund == 1 ? '1、' : ''}}取消预约后，您将不能参加本场次的学习。</p>
          <p class="c-pb10 c-lh36" v-if="refundInfo && refundInfo.isRefund == 1">2、取消预约后，一个工作日内将回退{{ticketNumData.enrollMode && ticketNumData.enrollMode == 1 ? refundInfo.cancelRefund : ticketNumData.cancelRefundSeat}}的{{ticketNumData.enrollMode && ticketNumData.enrollMode == 1 ? '复训费' : '席位费'}}到您的奖学金账户。</p>
          <p class="c-pt10 c-fs22 c-fc-smblue">是否确认取消本次预约？</p>
        </div>
        <p class="c-fs26 c-bd-t1-eee c-flex-row c-justify-sb c-hh84 c-aligni-center c-mt40">
          <span class="c-textAlign-c c-fc-gray c-w50 c-bd-r1-eee" @click="showCancelReservation = false">我再想想</span>
          <span class="c-textAlign-c c-fc-smblue c-w50" @click="cancelReservation">取消预约</span>
        </p>
      </div>
    </cj-popup>
    <cj-confirm :isShow="isShowVerifyTip" :option="{title:'', message: '', titleCenter: true, showMasker: true, clickCloseModal: false, showCancelButton: false, cancelButtonText: '',confirmButtonText: '去认证'}" @onConfirm="goToAuthentication">
      <div class="c-p c-fc-xblack">
        <div class="c-textAlign-c c-fs28 c-fw600">实名认证</div>
        <div class="c-mt20 c-ph40 c-fs24">请继续点击下方按钮实名认证，认证成功后方可通过人脸识别进入会场</div>
        <span @click="isShowVerifyTip = false" class="iconfont c-fs24 c-fc-sgray c-pa c-p-tm20 c-p-r20">&#xe773;</span>
      </div>
    </cj-confirm>
  </div>
</template>
<script>
import { utilJs } from "@/utils/common.js"
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import CjConfirm from "@/plugin/cjConfirm/cjConfirm.vue";
export default {
  name: "TicketNum",
  components: {
    swiper,
    swiperSlide,
    CjConfirm
  },
  data() {
    return {
      showCancelReservation: false, // 约课取消预约的弹框
      showInstructionsDialog: false,
      ticketNumData: '',
      companyAuth: null,
      from: 'activity', // 来源：活动, reservation: 约课
      reId: '', // 预约的id 我的约课过来存在
      refundInfo: {}, // 约课取消预约用到
      swiperOption: {
        pagination: {
          el: '.swiper-pagination',
          type: 'fraction',
          progressbarOpposite: true,
          bulletActiveClass: 'theme-bg'
        },
        direction: 'vertical',
        autoHeight: true,
        loop: true,
        slidesPerView: '1',
        observer: true,
        navigation: {
          nextEl: '.swiper-button-next',
        },
        on: {
        },
      },
      isSummitActivity: false,
      isShowVerifyTip: false, // 是否展示认证提示弹窗
    }
  },
  created() {
    utilJs.appShare(this);
  },
  filters: {
    formatStringTime(value) {
      if (value != undefined && value != '' && value != null) {
        return value.substr(5, 11);
      } else {
        return value;
      }
    },
    formatTicketNum(value) {
      if (value != undefined && value != '' && value != null) {
        if (/\S{5}/.test(value)) {
          return value.replace(/\s/g, '').replace(/(\d{4})(?=\d)/g, "$1 ");
        }
      } else {
        return value;
      }
    }
  },
  computed: {
    verifyStatus() { // 第一张票券是否已实名，（产品黄长发：指定活动已限制只能购买一张票，所以不用考虑多张票券的情况）
      const item = this.ticketNumData && this.ticketNumData[0] ? this.ticketNumData[0] : {}
      return !!item.verifyStatus
    },
    isActivityEnd() {
      const item = this.ticketNumData && this.ticketNumData[0] ? this.ticketNumData[0] : {}
      const enrollEndAt = item.enrollEndAt || ''
      const endTime = new Date(enrollEndAt.replace(/-/g, '/')).getTime()
      const nowTime = new Date().getTime()
      return nowTime > endTime
    }
  },
  methods: {
    goToAuthentication() {
      if (this.isActivityEnd) {
        return
      }
      const item = this.ticketNumData && this.ticketNumData[0] ? this.ticketNumData[0] : {}
      const summitVerifyUrl = item.summitVerifyUrl
      window.location.href = summitVerifyUrl
    },
    getTicketNum() { // 活动获取票券
      let data = {
        activityId: this.$route.query.activityId,
        identCode: this.$route.query.identCode
      }
      utilJs.postMethod(`${global.apiurl}activities/getMobileTicketByUser`, data, (res) => {
        if (!(res && res.data && res.data.length)) { // 没有数据表示作废或转赠的票，重定向到“我的活动”列表页
          this.$routerGo(this, "replace", {
            path: "/member/myActivity/myActivity"
          })
          return
        }
        this.ticketNumData = res.data;
        this.isSummitActivity = res.isSummitActivity

        // 第一张票券是否已实名，（产品黄长发：指定活动已限制只能购买一张票，所以不用考虑多张票券的情况）
        const item = this.ticketNumData && this.ticketNumData[0] ? this.ticketNumData[0] : {}
        const enrollEndAt = item.enrollEndAt || ''
        const endTime = new Date(enrollEndAt.replace(/-/g, '/')).getTime()
        const nowTime = new Date().getTime()
        const isActivityEnd = nowTime > endTime
        if (res.isSummitActivity && !item.verifyStatus && !isActivityEnd) { // 需要认证 && 未认证 && 活动未结束
          this.isShowVerifyTip = true
        }
      })
    },
    getReservationInfo() { // 约课的预约信息
      let $this = this;
      utilJs.getMethod(global.apiurl + 'reservations/enrollInfo?rtId=' + this.$route.query.activityId + '&reId=' + this.reId,
        function (res) {
          $this.ticketNumData = res;
          $this.refundInfo = res.checkIsRefund;
        }
      )
    },
    goToSectionDetail() { // 点击场次名称 跳转去场期详情
      this.$routerGo(this, "push", {
        path: "/activity/activityDetail",
        query: { ActivityNo: this.ticketNumData.rtId, from: 'sectionInfo', rsId: this.ticketNumData.rsId }
      });
    },
    //点击跳到我的约课
    goToMyReservationList() {
      let toPath = `/member/myReservation/reservationClassList?rtId=${this.ticketNumData.rtId}`;
      if (this.companyAuth.enableDeclareModule == 1) { // 聚尚美跳到预约的主题列表
        toPath = '/member/myReservation/myReservationList';
      }
      this.$routerGo(this, "push", { path: toPath });
    },
    toAlterTicket() { // 点击改签
      this.$routerGo(this, "push", {
        path: '/homePage/reservation/sectionInfo',
        query: { rtId: this.ticketNumData.rtId, reId: this.ticketNumData.reId, rpId: this.ticketNumData.rpId }
      });
    },
    cancelReservation() { // 约课点击取消预约
      this.showCancelReservation = false
      var $this = this
      utilJs.postMethod(global.apiurl + 'reservations/cancelEnroll', { reId: this.ticketNumData.reId }, function (res) {
        $this.$showCjToast({
          text: "取消成功",
          type: "success",
        }).then(() => {
          $this.getReservationInfo()
        })
      })
    },
    //分享
    wechatShare: function () {
      utilJs.wechatConfig("", "", "", "", function () { });
    },
    //手机端分享
    appShare: function () {
      utilJs.appShareTrue("", "", "", "");
    }
  },
  activated() {
    this.companyAuth = JSON.parse(localStorage.getItem("companyAuth"));
    this.from == 'reservation' ? setDocumentTitle("预约信息") : setDocumentTitle("预约码");// eslint-disable-line
    this.ticketNumData = {};
    this.isSummitActivity = false
    this.from = this.$route.query.from ? this.$route.query.from : 'activity';
    this.reId = this.$route.query.reId ? this.$route.query.reId : '';
    this.isShowVerifyTip = false;
    this.from == 'activity' ? this.getTicketNum() : this.getReservationInfo();
    this.wechatShare();
  }
}
</script>
<style scoped>
.bg-orange {
  background-color: #e28853;
}
em {
  font-style: normal;
}
.c-pa-em {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
}
.c-pa-lt0 {
  left: -0.25rem;
  top: -0.25rem;
}
.c-pa-rt0 {
  right: -0.25rem;
  top: -0.25rem;
}
.refund-pa {
  margin-left: -2.5rem;
  margin-top: -1.75rem;
}
.box-bottom-border {
  background-image: -webkit-gradient(
      linear,
      50% 0,
      0 100%,
      from(transparent),
      color-stop(0.5, transparent),
      color-stop(0.5, #e28853),
      to(#e28853)
    ),
    -webkit-gradient(linear, 50% 0, 100% 100%, from(transparent), color-stop(0.5, transparent), color-stop(0.5, #e28853), to(#e28853));
  background-size: 0.9rem 0.45rem;
  background-repeat: repeat-x;
  background-position: 0.45rem 100%;
}
.ticket-top-box {
  position: absolute;
  top: -0.375rem;
  left: -0.375rem;
  width: 15.5rem;
  height: 0.75rem;
  background: #E5E5E5;
  border-radius: 0.375rem;
  padding: 0.25rem;
}
.ticket-top-box-child {
  width: 100%;
  height: 100%;
  background: #ccc;
  border-radius: 0.125rem;
}
.btn-cancle {
  color: #999;
  box-shadow: 0px 0px 11px 2px rgba(35, 24, 21, 0.09);
}
.btn-change {
  color: #4893f8;
  box-shadow: 0px 0px 15px 3px rgba(72, 147, 248, 0.15);
}
.cancel-icon {
  bottom: 0.5rem;
  right: 1.5rem;
}
.swiper-pagination {
  position: fixed;
  bottom: 3.5rem;
  font-size: 0.55rem;
  color: #999;
  opacity: 0.8;
}
.swiper-pagination >>> .swiper-pagination-current {
  color: #333;
  font-weight: 600;
}
.swiper-button-prev,
.swiper-button-next {
  position: fixed;
  bottom: 5rem;
  background-color: #ccc;
  background-image: none;
  top: auto;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
}
.swiper-button-prev {
  left: 50%;
  margin-left: -0.95rem;
  display: none;
}
.swiper-button-next {
  right: 50%;
  margin-right: -0.95rem;
}
.gray-mask {
  background-image: linear-gradient(179deg, #F1F1F1 0%, #FFFFFF 75%);
}
</style>

